<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" width="600px" center :before-close='handleClose'>
      <span slot="title" style="">提 示</span>
      <!-- model 模型值  它里面的值是要提交给后台进行注册的 
    form 拿到表单
    rules 校验规则
    prop 校验和清除
-->
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="80px"
        :inline="false"
        size="normal"
        label-position="left"
      >
        <!-- 头像 -->
        <el-form-item label="头像" prop="avatar">
          <!-- 
            action： 上传的地址 跟axios没有关系
            show-file-list:是否展示上传之后的列表
            on-success：上传成功之后的回调 做两件事 图片预览和给form.avatar赋值
            on-error：文件上传失败之后的回调 给它一个提示
            before-upload：上传之前的回调，可以在这里检测文件类型和大小 还可以给额外参数赋值
            :data 上传时需要传递的额外参数 后台需要 值是个对象 对象的属性叫image 后台规定的 值是file类型
           -->
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-error="handleAvatarError"
            :data='uploadData'
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 昵称 -->
        <el-form-item label="昵称" prop="username">
          <el-input v-model="form.username" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <!-- 手机 -->
        <el-form-item label="手机" prop="phone">
          <el-input
            v-model="form.phone"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password" show-password>
          <el-input v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <!-- 图形码 -->
        <el-row>
          <el-col :span="16">
            <el-form-item prop="code" label="图形码">
              <el-input
                v-model="form.code"
                placeholder="请输入图形码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" style="margin-left:10px">
            <!-- 注册时候的验证码和登录时候的不一样 -->
            <img
              :src="registerCodeUrl"
              style="winth:100%;height:40px"
              @click="changeregisterCodeURL"
            />
          </el-col>
        </el-row>
        <!-- 验证码 -->
        <el-row>
          <el-col :span="16">
            <el-form-item prop="rcode" label="验证码">
              <el-input
                v-model="form.rcode"
                placeholder="请输入验证码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" style="margin-left:10px">
            <el-button size="default" @click="getRcode"
              >获取用户验证码</el-button
            >
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="register"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      registerCodeUrl: `${process.env.VUE_APP_BASEURL}/captcha?type=sendsms`,
      // 头像上传
      imageUrl: '', //上传之后的头像地址
      uploadUrl: `${process.env.VUE_APP_BASEURL}/uploads`, //上传的地址
      uploadData:{//上传时候的额外参数
        image:null,
      },
      form: {
        //里面的值将来是要提交给后台的
        avatar: '', //头像地址
        username: '', //昵称
        email: '', //邮箱
        phone: '', //手机
        password: '', //密码
        code: '', //图形码
        rcode: '' //验证码
      },
      rules: {
        //校验使用
        // 头像
        avatar: [
          { required: true, message: '头像不能为空', trigger: 'change' }
        ],
        // 昵称
        username: [
          { required: true, message: '昵称不能为空', trigger: 'blur' }
        ],
        // 邮箱
        email: [
          {
            required: true,
            // rule  校验规则
            // value 用户输入的值
            // callback  校验结果  无论成功与否 都需要调用
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error('邮箱不能为空'))
              }
              // 利用邮箱的正则进行匹配
              const reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
              if (!reg.test(value)) {
                return callback(new Error('邮箱不合法'))
              }
              callback()
            },
            trigger: 'blur'
          }
        ],
        // 手机号
        phone: [
          // required 非空    message 提示文字    trigger: 'blur' ：触发时机： 失去焦点
          {
            required: true,
            validator: (rule, value, callback) => {
              //   rule 校验对象   value 输入的值   callback 校验成功还是失败的 （一定要调用）
              if (!value) {
                //如果手机框里没有值 下面就是组织代码执行
                return callback(new Error('手机号不能为空'))
              }
              // 手机的校验正则
              const reg = /^1[3-9][0-9]{9}$/
              if (!reg.test(value)) {
                return callback(new Error('手机号不合法'))
              }
              // 校验成功 不需要添加任何参数 但是一定要调用
              callback()
            },
            trigger: 'blur'
          }
        ],
        // 密码
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '密码必须在6-16位之间', trigger: 'blur' }
        ],
        code: [{ required: true, message: '图形码不能为空', trigger: 'blur' }],
        rcode: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 重新获取图形验证码
    changeregisterCodeURL () {
      this.registerCodeUrl = `${
        process.env.VUE_APP_BASEURL
      }captcha?type=sendsms&t=${new Date() - 0}`
    },
    // 获取验证码
    async getRcode () {
      // 判断用户是否输入了图形码和验证码
      // 点出表单的方法 validateField 用来校验部分字段
      // 第一种方式
      // this.$refs.form.validateField(async  ['phone','code'],errorMessage=>{
      //  if(this.form.phone.trim().length>0 && this.form.code.trim().length>0) {
      //    const res = await this.$axios.post('/sendsms',{
      //      phone:this.form.phone,
      //      code:this.form.code
      //    })
      //    console.log(res);
      //  }
      // })
      // 第二种方式
      let isOK = 0
      this.$refs.form.validateField(['phone'], errorMessage => {
        // 如果里边没有值 就isOK++
        if (!errorMessage) {
          isOK++
        }
      })
      this.$refs.form.validateField(['code'], errorMessage => {
        if (!errorMessage) {
          isOK++
        }
      })
      if (isOK == 2) {
        const res = await this.$axios.post('/sendsms', {
          phone: this.form.phone,
          code: this.form.code
        })
        if (res.code === 200) {
          this.form.rcode = res.data.captcha
        } else {
          this.$message.error(res.message)
          this.registerCodeUrl = `${
            process.env.VUE_APP_BASEURL
          }captcha?type=sendsms&t=${new Date() - 0}`
        }
      }
    },
    // 上传相关的方法
    // 上传成功之后
    handleAvatarSuccess (res, file) {
      console.log(res);
      if(res.code === 200) {
        // 实现预览
      this.imageUrl = URL.createObjectURL(file.raw)
      this.form.avatar = res.data.file_path
      }else {
        this.$message.error(res.message)
      }
    },
    // 上传失败
    handleAvatarError(err) {
      this.$message.error('上传失败')
    },
    // 上传之前
    beforeAvatarUpload (file) {
      const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG/GIF 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      // 给需要传递的额外参数赋值
      this.uploadData.image = file
      return isJPG && isLt2M
    },
    // 注册按钮
    register() {
      this.$refs.form.validate( async vaild =>{
        if(!vaild) return
        const res =await this.$axios.post('register', this.form)
        if(res.code ===200) {
          console.log();
          this.$message.success('注册成功')
          this.dialogVisible = false
          this.$refs.form.resetFields()
        }else {
          this.$message.error('注册失败')
          this.changeregisterCodeURL()
        }
      })
    },
    // 监听关闭的方法
    handleClose() {
      // resetFields  对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs.form.resetFields()
      this.imageUrl =''
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less">

.avatar-uploader {
  text-align: center;

  .el-icon-plus {
    line-height: 6;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
